<!DOCTYPE html>
<html>
<head>
	<title>查询地理位置工具</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<meta name="keywords" content="lianzai管理系统">
	<meta name="description" content="lianzai管理系统">
	<link href="/css/bootstrap.min.css" rel="stylesheet">
	<style>
	*{
	margin:0;
	padding: 0;
	font-family: Microsoft Yahei;
	}
	.container{
		margin-top: 40px;
	}
	#search-btn{
		margin-top: 10px;
	}
	</style>
</head>

<body>
<div class="container" style="margin-top:10px">
	<div class="row">
		<div class="col-md-12">
			
			<div class="col-md-9" style="padding-left:0px;padding-right:0px">
			<input type="text" name="" id="place-input" class="form-control" style="width:100%;" placeholder="请输入地址（备注：地址要尽量详细，查询结果只做参考）" value="长沙五一广场">
			</div>
			<div class="col-md-3" style="padding-left:10px;padding-right:0px">
			<button type="button" id="search-btn" class="btn btn-success" style="margin-top:0px;width:100%;">查询</button>
			</div>
			
		</div>
		<div class="col-md-12" style="padding-top:10px">
			<input type="text" name="" id="jw-input" class="form-control" style="width:100%;" placeholder="查询经纬度结果" value="">
		</div>
		<div class="col-md-12" style="padding-top:10px">
			<div id="main" style="height: 470px;"></div>
		</div>
	</div>
</div>
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<script src="/js/plugins/echarts/echarts.js" th:src="@{/js/plugins/echarts/echarts.js}"></script>
<script src="/js/plugins/echarts/china.js" th:src="@{/js/plugins/echarts/china.js}"></script>
<script type="text/javascript">
	var token='Civd3aRHstaEG2sdxsIF4z4ZkS9jTUev';   //申请百度地图api的密钥
	var url='http://api.map.baidu.com/geocoder/v2/?output=json&ak='+token+'&address=';
	var placeInput=$('#place-input');
	var searchBtn=$('#search-btn');
	var resultInput = $('#jw-input');
	var myChart=echarts.init(document.getElementById('main'));
	var chartData=[];

	searchBtn.click(function(){
		var place=placeInput.val();
		if(place){
			$.getJSON(url  +place + '&callback=?',function(res){
				var loc;
				chartData.length = 0;
				if(res.status === 0){
					loc=res.result.location;
					chartData.push({
						name:name,
						value:[loc.lng,loc.lat]
					})
					resultInput.val(+loc.lng + "," + loc.lat)
					drawMap(place);
				}else{
					alert('百度没有找到此地址信息');
				}
			});
		}else{
		     alert('请输入查找地址');
		}
	});

	function drawMap(name){
		var option={
			backgroundColor: '#404a59',
			title:{
				show:true,
				text:'查询地址经纬度',
				top:'10',
				left:'center', 
				textStyle:{
					color: '#fff'
				}
			},
			tooltip:{
				trigger:'item'
			},
			toolbox: {
        		feature: {
					saveAsImage:{
						show:true
					}
				}
			},
			geo:{
				map:'china',
				label:{
					emphasis:{
						show:false
					}
				},
				roam:true,
				itemStyle:{
					normal:{
						areaColor:'#323c48',
						borderColor:'#111'
					},
					emphasis:{
						areaColor:'#2a333d'
					}
				}
			},
			series:[{
				name:'经纬度',
				type:'scatter',
				coordinateSystem:'geo',
				data:chartData,
				symbolSize:function(val){
					return 10;
				}
			}]
		};
		myChart.setOption(option);
	}

</script>
</body>
</html>